<script setup lang="ts">
import backgroundImage from '@/assets/images/bg.jpg'

interface Props {
  img?: string
  title?: string
  description?: string
}
withDefaults(defineProps<Props>(), {
  img: backgroundImage,
  title: "Pink Crimson's Blog",
  description: "All in all you're just another brick in the wall."
})
</script>

<template>
  <div
    class="header-image"
    :style="{
      backgroundImage: 'url(' + img + ')',
      backgroundSize: 'cover',
      backgroundPosition: 'center'
    }"
  >
    <div class="header-text">
      <div style="font-size: 64px; font-weight: bold">{{ title }}</div>
      <div style="font-size: 18px; margin-top: 20px; color: darkgrey">{{ description }}</div>
    </div>
  </div>
</template>

<style scoped>
.header-image {
  height: 400px;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.header-text {
  display: flex;
  flex-direction: column;
  align-items: center;
}
</style>
